<template>
	<view class="">
		<view class="all-tasks">
			<view v-show="item.taskContent" class="every-task justify-content-l" v-for="(item,index) in taskList"
				:key="index">
				<view class="align-items-l">
					<dev-svg-image mode="image" :imageUrl="item.taskLibraryIcon" width="194" height="174">
					</dev-svg-image>
					<view class="task-details">
						<view class="task-name">
							{{item.taskLibraryName || ''}}
						</view>
						<view class="task-progress ellipsis">
							{{item.taskContent || ''}}
						</view>
						<view class="task-reward align-items-l">
							<text style="margin-right: 10rpx;">+{{item.points}}</text>
							<dev-svg-image width="44" height="36" mode="image"
								image-url="shoppingMall/3134AD32EBD94B39BBDE51AEEDEFA7B0.png">
							</dev-svg-image>
						</view>
					</view>
				</view>

				<view @tap="remindTx(item.userTaskDetailId,item.thematicPlan)" v-if="item.taskStatus==0 && item.todayFlag ==0"
					:class="item.taskStatus==1?'incomplete':'complete'">
					去提醒
				</view>
				<view v-else
					:class="item.taskStatus==1 || item.todayFlag ==1?'incomplete':'complete'">
					{{item.taskStatus==1?'已完成':'已提醒'}}
				</view>
			</view>
		</view>
		
		<nodata v-if="taskList.length==0 || !taskList"></nodata>
	</view>
</template>

<script>
	export default {
		name: 'health-plan', //健康计划
		props: {
			//查询任务时间
			taskDate: {
				type: String,
				default: ''
			},
			//其他用户id
			otherUserId: {
				type: [String, Number],
				default: '',
			}
		},
		data() {
			return {
				taskList: [], //任务列表
			}
		},
		watch: {
			taskDate(newValue, oldValue) {
				this.getHealthTask();
			},
			otherUserId(newValue, oldValue) {
				this.getHealthTask();
			}
		},
		methods: {
			//获取健康任务
			getHealthTask() {
				if (!this.taskDate || !this.otherUserId) return
				this.taskList = [];
				this.$https.get(global.apiUrls.healthTask, {
					taskDate: this.taskDate, //日期
					userId: global.userInfo.userId,
					otherUserId: this.otherUserId,
				}).then(res => {
					if (res.data.code === 1000) {
						this.taskList = res.data.result;
					}
				})
			},
			//去提醒
			remindTx(serviceId,thematicPlan) {
				let fdata = {
					memberId: this.otherUserId, //被提醒id
					adviserId: global.userInfo.userId, //自己id 
					remindType: 3, //2健康数据  3健康任务
					serviceId: serviceId, //指标id
					typeId:thematicPlan, //提醒类型id
					recordTime: this.taskDate
				}
				let _this = this;
				this.$api.post(global.apiUrls.remindTx, fdata)
					.then(res => {
						if (res.data.code == 1000) { //提醒完成
							this.getHealthTask();
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
			
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss">
	.all-tasks {
		padding: 30rpx 24rpx;

		.every-task {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			.task-details {
				margin-left: 12rpx;

				.task-name {
					font-size: 34rpx;
					font-weight: 500;
					color: #4A4A4A;
				}

				.task-progress {
					width: 300rpx;
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #F5A623;
				}

				.task-reward {
					margin-top: 20rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.incomplete {
			width: 150rpx;
			height: 66rpx;
			background: #E2E1E2;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #9B9B9B;
		}

		.complete {
			width: 150rpx;
			height: 66rpx;
			background: #2EA7E0;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}


	}
</style>
